<template>
	<div id="makecard" class="same-change-oldstyle" >
		<div class="same-head-box">
                <div class="saem-seat-box">
                    <div class="saem-seat-left">
                        <span>当前位置：</span>
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item >水卡管理</el-breadcrumb-item>
							<el-breadcrumb-item >特殊水卡</el-breadcrumb-item>
							<el-breadcrumb-item >申请列表</el-breadcrumb-item>
							<el-breadcrumb-item>制卡</el-breadcrumb-item>
						</el-breadcrumb>
                    </div>
                    <div class="saem-seat-right">
                        <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
                        <!-- <button class="same-search-btns" @click="returnBack">返回</button>	  -->
                    </div>
                </div>
            </div>
		<div class="makecardwrap">
			<div class="searchresault">
				<div class="rowitem">
					<span class="nametitle">水卡类型:</span>
					<p>{{card_type}}</p>
				</div>
				<div class="rowitem">
					<span class="nametitle">用户姓名:</span>
					<p>{{full_name}}</p>
				</div>
				<div class="rowitem">
					<span class="nametitle">手机号码:</span>
					<p>{{tel}}</p>
				</div>
				<div class="rowitem">
					<span class="nametitle">地址信息:</span>
					<p>{{address}}</p>
				</div>
				<div class="rowitem">
					<span class="nametitle">所属园区:</span>
					<p>{{village_name}}</p>
				</div>
				<div class="rowitem">
					<span class="nametitle">充值金额:</span>
					<p>{{recharge_money|filterNumber}}元</p>
				</div>

				<div class="rowitem">
					<span class="nametitle">押金:</span>
					<p>{{card_deposit|filterNumber}}元</p>
				</div>
				<!--
				<div class="rowitem">
					<span class="nametitle">证件类型:</span>
					<p>身份证</p>
				</div>-->
				<div class="rowitem">
					<span class="nametitle">证件号码:</span>
					<p>{{IDcard}}</p>
				</div>
				<div class="rowitem column">
					<span class="nametitle">证件照片:</span>
					<div class="idcard">
						<div class="idcarditem">
							<span>身份证正面</span>
							<img :src="audit_dataZ" />
						</div>
						<div class="idcarditem">
							<span>身份证背面</span>
							<img :src="audit_dataF" />
						</div>
					</div>
				</div>
				<div class="rowitem">
					<span class="nametitle">水卡卡号:</span>
					<input type="text" name="" v-model="card_id" placeholder="请输入水卡卡号" class="cardnuminput" />
					<i class="importanticon">*</i>
				</div>
				<!--<div class="rowitem">
					<span class="nametitle">领卡状态:</span>
					<el-select v-model="statevalue" placeholder="请选择">
						<el-option v-for="item in receivestate" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					<i class="importanticon">*</i>
				</div>-->
				<button @click="confirm()">确认</button>
			</div>
		</div>

		<!--弹窗-->
		<div class="Promptmodelwrap">
			<div class="Promptmodel">
				<img src="../../../static/images/successicon.png" v-show="success"/>
				<span v-show="success">操作成功！</span>
				<img src="../../../static/images/failicon.png" v-show="!success"/>
				<span v-show="!success">操作成功！</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'makecard',
		data: function() {
			return {
				success:true,
				card_type: '',
				full_name: '',
				tel: '',
				address: '',
				village_name: '',
				paper_type: '',
				IDcard: '',
				audit_dataZ: '',
				audit_dataF: '',
				card_id: '',
                recharge_money:0,
                card_deposit:0,
			}
		},
		created:function(){
			this.applyInfo();
		},
		inject: ['reload'],
		methods: {
			RefreshFun(){
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack(){
				this.$router.back(-1);
			},
			confirm: function() {
				var apply_id = this.$route.query.id;
				if(this.card_id == '' ){
             		this.$message.error('水卡卡号不能为空');
             		return false;
             	}
				this.$post({
		    		url: 'Partner/WaterCard/businessCardPrinting',
		    		data: {
		    			id:apply_id,
		    			sn:this.card_id
		    		},
		    		success: (data)=>{
		    			if(data.code == 1000) {
		    				$('.Promptmodelwrap').stop(true, true).fadeIn().delay(800).fadeOut();
						}else{
							this.$message.error(data.message);
						}
		    		}
				})




			},
			applyInfo(){
				var apply_id = this.$route.query.id;
				this.$post({
		    		url: 'Partner/WaterCard/getWaterCardAudit',
		    		data: {
		    			id:apply_id
		    		},
		    		success: (data)=>{
		    			if(data.code == 1000) {
		    				this.card_type = data.data.card_type;
							this.full_name = data.data.full_name;
							this.tel = data.data.tel;
							this.address = data.data.address;
							this.village_name = data.data.village_name;
							this.paper_type = data.data.paper_type;
							this.IDcard = data.data.IDcard;
                            this.recharge_money = data.data.recharge_money;
                            this.card_deposit = data.data.card_deposit;
							this.audit_dataZ = data.data.audit_data[0];
		    				this.audit_dataF = data.data.audit_data[1];
						}
		    		}
				})
			}
		},
		mounted() {

		},
		watch: {

		}
	}
</script>

<style>
	#makecard .makecardwrap {
		padding: 0 40px;
	}

	#makecard .makecardwrap .rowitem {
		display: flex;
		align-items: center;
		padding: 10px 0;
	}

	#makecard .makecardwrap .rowitem .nametitle {
		width: 100px;
		font-size: 16px;
		font-weight: bold;
	}

	#makecard .makecardwrap .rowitem p {
		font-size: 14px;
	}

	#makecard .makecardwrap .column {
		flex-direction: column;
		align-items: flex-start;
	}

	#makecard .makecardwrap .idcard {
		display: flex;
		align-items: center;
	}

	#makecard .makecardwrap .idcard .idcarditem {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 10px;
	}

	#makecard .makecardwrap .idcard .idcarditem span {
		font-weight: normal;
		font-size: 14px;
		padding: 10px 0;
	}

	#makecard .makecardwrap .searchresault button {
		background-color: #2c5586;
		border-radius: 4px;
		border: none;
		color: #fff;
		cursor: pointer;
		width: 400px;
		height: 40px;
		line-height: 40px;
		margin-left: 60px;
		margin-top: 40px;
		margin-bottom: 100px;
	}

	#makecard .makecardwrap .rowitem .importanticon {
		font-style: normal;
		color: #913f46;
		margin-left: 10px;
	}

	#makecard .makecardwrap .rowitem .el-input--suffix .el-input__inner {
		width: 100px;
		height: 40px;
	}

	#makecard .makecardwrap .rowitem .cardnuminput {
		border: 1px solid #d3d4d4;
		height: 38px;
		border-radius: 4px;
		padding: 0;
		text-indent: 1em;
	}
	#makecard .Promptmodel {
		position: absolute;
		width: 350px;
		height: 120px;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		margin: auto;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 10px #333;
		border-radius: 10px;

	}

	#makecard .Promptmodel img {
		margin-right: 20px;
		width: 50px;
	}
	#makecard .Promptmodelwrap{
		display: none;
	}
</style>
